<template>
	  <uni-popup ref="infoPopup" background-color="#fff" :is-mask-click="false">
	   <view class="popup-content">
		   <scroll-view scroll-y="true" class="scroll_view_style">
		   <!-- 按钮 -->
		   <view class="headerPage">
			   <button @click="cancel" size="mini" class="cancel">取消</button>
			   <button @click="submitForm" size="mini" class="next">确认转签</button>
		   </view>
		   
		   <view style="margin-top: 100rpx;">
		   <uni-notice-bar text="请确认转签信息无误后，点击上方【确认转签】按钮，即可完成转签，转签后，请等待授权人完成签署！" />
		   
		   <view style="padding: 0 10rpx;">
		   <!-- 合同信息 -->
		   <view class="item-block">
		   	<p class="contract_name">合同名称：{{data.name}}</p>
		   	<p class="contract_date">签署截止日期：{{data.signExpiryDate}}</p>
		   </view>
		   
		   <!-- 原签署人 -->
		   <view class="item-block">
			   <view class="header">
				   <view class="title">
					   <span class="headerIcon">原</span>
					   <span>原签署人</span>
			       </view>
                <view v-for="item,index in startFrom.contractSignFlowList" :key="index">
			   <view v-if="item.signerType == 0 && item.systemCompanyId == $store.getters.companyInfo.id">
			   		<span class="sign_name">合同经办人：{{item.sealerName}}</span>
			   		<personalGreen v-if="item.iscertPeo == 1" class="certiyImg" />
			   		<personalGray v-else class="certiyImg" />
			   		<span class="sign_name">{{item.sealerMobile}}</span>
			   	</view>	
			   </view>	
			   </view>
			   <view v-for="item,index in startFrom.contractSignFlowList" :key="index">
			   <!-- signerType 0企业 1个人 -->
			   <view class="grey-color" v-if="item.signerType == 0 && item.systemCompanyId == $store.getters.companyInfo.id">
				   <view class="flex_between" style="justify-content: flex-start;">
					   <i class="iconfont themeColor titleIcon">&#xe61b;</i>
					   <span class="sign_name">{{item.signCompany }}</span>
					   <companyGreen v-if="item.iscertCom == 1" class="certiyImg1" />
					   <companyGray v-else class="certiyImg1" />
				   </view>
				   <view class="flex_between" style="justify-content: flex-start;">
					   <span class="sign_name">签署人：{{ item.signerName }}</span>
					   <personalGreen v-if="item.iscertPeo == 1" class="certiyImg1" />
					   <personalGray v-else class="certiyImg1" />
					   <span class="sign_name">{{item.signerMobile }}</span>
				   </view>
				   <view>
					   <span class="right-mar">
						   <i class="iconfont greenIcon" v-if="data.isFace==1">&#xe69a;</i>
						   <i class="iconfont grayIcon" v-else>&#xe69a;</i>
						   <span class="sign_name">人脸核身</span>
					   </span>
					   <span style="margin-left: 40rpx;">
						   <i class="iconfont grayIcon">&#xe69e;</i><span class="sign_name">无签署权限</span>
					   </span>
				   </view>
			   </view>
			   <!-- 个人 -->
			   <view class="grey-color" v-if="item.signerType == 1 && item.systemStaffId == $store.getters.staffInfo.id">
				   <view>
					   <i class="iconfont themeColor titleIcon">&#xe8c8;</i>
					   <span class="sign_name">{{item.signerName }}</span>
					   <personalGreen v-if="item.iscertPeo == 1" class="certiyImg1" />
					   <personalGray v-else class="certiyImg1" />
					   <span class="sign_name">{{item.signerMobile }}</span>
				   </view>
				   <view>
				   		<span class="right-mar">
				   			<i class="iconfont greenIcon" v-if="data.isFace==1">&#xe69a;</i>
				   			<i class="iconfont grayIcon" v-else>&#xe69a;</i>
				   			<span class="sign_name">人脸核身</span>			   						   
				   		</span>
				   		<span style="margin-left: 40rpx;">
				   			<i class="iconfont grayIcon">&#xe69e;</i><span class="sign_name">无签署权限</span>
				   		</span>			   
				   </view>
			   </view>
		     </view>
		   </view>
		   
		   <!-- 现签署人 -->
		   <view class="item-block">
			   <view class="header">
				   <view class="title">
					   <span class="headerIcon">现</span>
					   <span>现签署人</span>
				   </view>
			   <view v-if="radio == 1">
			   		<span class="sign_name">合同经办人：{{startFrom.contractSignFlowList[0].sealerName}}</span>
			   		<personalGreen v-if="startFrom.contractSignFlowList[0].iscertPeo == 1" class="certiyImg" />
			   		<personalGray v-else class="certiyImg" />
			   		<span class="sign_name">{{startFrom.contractSignFlowList[0].sealerMobile}}</span>
			   	</view>	
			   </view>	
			   <!-- 企业  -->
			   <view class="grey-color" v-if="radio == 1">
				   <view class="flex_between" style="justify-content: flex-start;">
					   <i class="iconfont themeColor titleIcon">&#xe61b;</i>
					   <span class="sign_name">{{$store.getters.companyInfo.name }}</span>
					   <companyGreen v-if="$store.getters.companyInfo.isCertify == 1" class="certiyImg1" />
					   <companyGray v-else class="certiyImg1" />
				   </view>
				   <view class="flex_between" style="justify-content: flex-start;">
					   <span class="sign_name">签署人：{{ nowForm.name }}</span>
					   <personalGreen v-if="nowForm.isCertify == 1" class="certiyImg1" />
					   <personalGray v-else class="certiyImg1" />
					   <span class="sign_name">{{nowForm.mobile }}</span>
				   			   		   					   
				   </view>
				   <view>
					   <span class="right-mar">
						   <i class="iconfont greenIcon" v-if="data.isFace==1">&#xe69a;</i>
						   <i class="iconfont grayIcon" v-else>&#xe69a;</i>
						   <span class="sign_name">人脸核身</span>
					   </span>
					   <span style="margin-left: 40rpx;">
						   <i class="iconfont greenIcon">&#xe69e;</i><span class="sign_name">有签署权限</span>
					   </span>
				   </view>
			   </view>
			   <!-- 个人 -->
			   <view class="grey-color" v-if="radio == 2">
				   <view>
					   <i class="iconfont themeColor titleIcon">&#xe8c8;</i>
					   <span class="sign_name">{{nowForm.name }}</span>
					   <personalGreen v-if="personCer == 1" class="certiyImg1" />
					   <personalGray v-else class="certiyImg1" />
					   <span class="sign_name">{{nowForm.mobile }}</span>
				   </view>
				   <view>
				   		<span class="right-mar">
				   			<i class="iconfont greenIcon" v-if="data.isFace==1">&#xe69a;</i>
				   			<i class="iconfont grayIcon" v-else>&#xe69a;</i>
				   			<span class="sign_name">人脸核身</span>			   						   
				   		</span>
				   		<span style="margin-left: 40rpx;">
				   			<i class="iconfont greenIcon">&#xe69e;</i><span class="sign_name">有签署权限</span>
				   		</span>			   
				   </view>
			   </view>
		   </view>
		   
       </view>
	   </view>
	   </scroll-view>
	   </view>
	  </uni-popup>
</template>

<script>
	import {selectListPermiss} from "@/api/ec/console/seal/staffSeal";
	import {isCertStaff} from "@/api/ec/work/staff/staff";
	import {isCertCompany} from "@/api/ec/work/company/company";
	import companyGray from "@/components/svg/companyGray"
	import companyGreen from "@/components/svg/companyGreen"
	import personalGray from "@/components/svg/personalGray"
	import personalGreen from "@/components/svg/personalGreen"
	import {getContractSignDetail} from "@/api/ec/work/contract/contract";
	export default {
		components: {companyGray,personalGray,personalGreen,companyGreen},
		props:{
			// 合同信息
			data: {
			  type: Object,
			},
			nowForm:{
			  type: Object,
			},
			radio:{
			  type: Number,
			},
			personCer:{
			  type: Number,
			},        
		},
		data() {
		  return {
			  isType: "", // 判断身份信息 个人还是企业 true企业  false个人
			  startFrom: {contractSignFlowStarter: {},contractSignFlowList:[{contractTypeName:null,businessTypeName:null}]},//签署流程
		  }
		},
		methods: {
			openDialog(){
				this.initData()
				this.$refs.infoPopup.open('bottom')
			},
			initData(){
			      let contractId = this.data.id
			      getContractSignDetail(contractId).then((response) => {
			          this.startFrom = response.data;
			      });
			},
			cancel(){
				this.$refs.infoPopup.close()
			    this.$emit("cancel");
			},
			submitForm(){
			    this.$emit("submit");
			} 
			
		}
	}
</script>

<style lang="scss" scoped>
	.greenIcon{
	  color: #00a660;
	  font-size: 24rpx;
	}
	.right-mar{
	  margin-left: 6rpx;
	}
	.popup-content{
		height: 1100rpx;
		overflow-x: hidden;
		background: #fff;
		
		.scroll_view_style {
		  height: 100%;
		}
	}
	
	.headerPage{
		position: fixed;
		top: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #e6f6ef;
		padding: 20rpx 30rpx;
		.cancel{
			background: #fff;
			color: $uni-color-primary;
			border: solid 1rpx $uni-color-primary;
			height: 60rpx;
			line-height: 60rpx;
		}
		.next{
			background: $uni-color-primary;
			color: #fff;
			border: solid 1rpx $uni-color-primary;
			height: 60rpx;
			line-height: 60rpx;
		}
		
	}
	.round_contractInfo{
	  width: 32rpx;
	  height: 32rpx;
	  line-height: 32rpx;
	  border-radius:50%;
	  text-align: center; 
	  display: inline-block;
	  margin-right: 10rpx;
	  color: #fff;
	  background: $uni-color-primary;
	}
	.add_btn{
		background: $uni-color-primary;
		border: 1rpx solid #eee;
		color: #fff;
	}
	::v-deep .uni-navbar__header-btns-left {
	  width: 240rpx !important;
	}
	
	::v-deep .uni-navbar__header-btns-right {
	  width: 420rpx !important;
	}
	.greenIcon{
	  color: #00a660;
	  font-size: 24rpx;
	}
	.grayIcon{
	  color: #666;
	  font-size: 24rpx;
	}
	.right-block{
		margin-left: 30rpx;
	}
	.setting-span{
		color: $uni-color-primary;
	}
	.text-span{
		color: #666;
		.iconfont{
			margin-right: 4rpx;
			font-size: 24rpx;
		}
	}
	.header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		::v-deep .uni-data-checklist .checklist-group .checklist-box{
			margin-right: 40rpx;
		}
	}
	.sign_name {
		padding: 0 0 0 6rpx;
	}

	.titleIcon {
		font-size: 26rpx;
	}

	.contract_name {
		font-size: 30rpx;
		font-weight: 550;
	}

	.contract_date {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}

	.grey-color {
		background: #f1f1f1;
		padding:14rpx 20rpx;
		margin: 16rpx 0 30rpx 0;
		view{
			line-height: 48rpx;
		}
	}

	.certiyImg {
		width: 28rpx;
		height: 30rpx;
		display: inline-block;
		margin: 0 5rpx 4rpx 5rpx;
		vertical-align: middle;
	}
	.certiyImg1{
		width: 28rpx;
		height: 30rpx;
		display: inline-block;
		margin: 0 5rpx 12rpx 5rpx;
		vertical-align: middle;
	}

	.item-block {
		padding: 10rpx 30rpx 30rpx;
	}

	.title {
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}

	.headerIcon {
		background: $uni-color-primary;
		color: #fff;
		border-radius: 50%;
		text-align: center;
		font-size: 20rpx;
		margin-right: 8rpx;
		width: 42rpx;
		height: 42rpx;
		line-height: 42rpx;
	}
	
	::v-deep .uni-noticebar{
		padding: 10rpx 16rpx !important;
	}

	page {
		background: $uni-bg-color;
	}
</style>